<template>
  <div class="home">
    <!-- 顶部信息 -->
    <div class="header">
      <HeaderComponents />
    </div>
    <!-- 内容区域 -->
    <div class="main">
      <!-- 内容区域 -->
      <div class="nav">
        <!-- 导航显示区域 -->
        <router-view name="sidebar"></router-view>
      </div>
      <div class="content">
        <!-- 页面显示区域 -->
        <vTags></vTags>
        <div class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="move" mode="out-in">
              <keep-alive :include="tagsList">
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 直接引入组件或者函数、无需注册
import HeaderComponents from "@/components/HeaderComponents.vue";
import vTags from "@/components/nav/Tags.vue";
import bus from "@/components/nav/bus";

import { computed, onMounted, inject } from "vue";
import { useStore } from "vuex";

const store = useStore();
// const bus = inject("bus"); // 假设你通过 provide 在顶层注入了 bus

let tagsList = computed(() => {
  return store.getters.cachedTags;
});

onMounted(() => {
  // 使用事件总线监听事件（假设你还在使用事件总线）
  bus.on("content-collapse", (msg) => {
    collapse.value = msg;
  });

  bus.on("tags", (msg) => {
    let arr = [];
    for (let i = 0, len = msg.length; i < len; i++) {
      msg[i].name && arr.push(msg[i].name);
    }
    // let arr = msg.filter((item) => item.name).map((item) => item.name);
    store.getters.cachedTags = arr;
    // store.commit('updateCachedTags', arr); // 假设你有一个 mutation 来更新 cachedTags
  });
});

//函数方法
const handlerClick = () => {
  // console.log("点击测试");
};
</script>
<style lang="scss" scoped>
.home {
  font-size: 14px;
  height: 100vh; // 设置 home 的高度为视口高度
  display: flex;
  flex-direction: column; // 使用 flex 布局，垂直堆叠子元素

  .header {
    width: 100%;
    height: 40px; // 假设 header 的高度是 40px，确保与 calc 中减去的值一致
  }
}

.main {
  flex: 1; // 使 .main 占据剩余空间
  display: flex;
  position: relative;

  .nav {
    /*设置导航栏为黏性定位 */
    max-width: 200px;
    background-color: var(--nav-bg);
    height: 100%; // 设置高度为 100%，确保与 .main 的高度一致
  }

  .content {
    flex: 1; // 使 .content 占据剩余空间
    display: flex;
    flex-direction: column; // 使用 flex 布局，垂直堆叠子元素
    background-color: rgb(236, 245, 255);
    z-index: 99;

    /* 内容区域 */
    .main-content {
      flex: 1; // 使 .main-content 占据剩余空间
      padding: 10px;
      //overflow-y: auto; // 当内容超出时，允许滚动
    }
  }

  .grid-content {
    border-radius: 2px;
    background-color: #fff;
    height: 100%; // 设置高度为 100%，确保与父容器的高度一致
    padding: 10px;
    overflow-y: auto; // 当内容超出时，允许滚动
  }
}
</style>
